<template>
  <!-- 遮罩层 -->
  <view v-if="show" class="modal-mask" @tap="closeModal">
    <!-- 弹窗主体 -->
    <view class="modal-content" @tap.stop="() => {}">
      <!-- 标题 -->
      <view class="modal-header" v-if="title">{{ title }}</view>
      
      <!-- 内容区域 -->
	  <view class="modal-body">
		  <rich-text :nodes="processedContent"></rich-text>
	  </view>

      <!-- 操作按钮 -->
      <view class="modal-footer">
        <view class="btn cancel" @tap="handleCancel" v-if="showCancel">{{ cancelText }}</view>
        <view class="btn confirm" @tap="handleConfirm">{{ confirmText }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 控制显示
    show: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 内容
    content: {
      type: String,
      default: ''
    },
    // 确认按钮文字
    confirmText: {
      type: String,
      default: '确认'
    },
    // 取消按钮文字
    cancelText: {
      type: String,
      default: '取消'
    },
    // 是否显示取消按钮
    showCancel: {
      type: Boolean,
      default: true
    }
  },
  computed: {
      processedContent() {
          return this.content.replace(/<img/g, '<img style="width:100%" class="custom-image"');
      }
  },
  methods: {
    closeModal() {
      this.$emit('close');
    },
    handleConfirm() {
      this.$emit('confirm');
      this.closeModal();
    },
    handleCancel() {
      this.$emit('cancel');
      this.closeModal();
    }
  }
}
</script>

<style lang="scss" scoped>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  animation: fadeIn 0.3s;

  .modal-content {
    background-color: #fff;
    width: 80%;
    border-radius: 12rpx;
    overflow: hidden;
    animation: slideIn 0.3s;
  }

  .modal-header {
    padding: 30rpx;
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    border-bottom: 1rpx solid #eee;
  }

  .modal-body {
    padding: 40rpx 30rpx;
    font-size: 28rpx;
    line-height: 1.5;
    color: #666;

	
  }
  

  .modal-footer {
    display: flex;
    border-top: 1rpx solid #eee;

    .btn {
      flex: 1;
      text-align: center;
      padding: 30rpx 0;
      font-size: 30rpx;

      &.cancel {
        color: #666;
        border-right: 1rpx solid #eee;
      }

      &.confirm {
        color: #007AFF;
        font-weight: bold;
      }
    }
  }
}
.custom-image {
  width: 100% !important;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
</style>